import {RecordsList} from './RecordsSection/RecordsList';
import React from 'react';
import styled from 'styled-components';
import {useRecords} from '../../../hooks/useRecords';
import {NoRecordError} from './RecordsSection/NoRecordError';

const DateAccounts = styled.section`
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius:16px;
  margin: 10px;
  font-size: 14px;
  padding: 12px;
  >header {
    color: #666;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    .title{
      margin-right: 12px;
      flex-grow: 0;
    }
    >ul{
      display: flex;
      white-space: nowrap;
      overflow: hidden;
      >li{
        &:first-child{
          padding-right: 8px;
          margin-right: 8px;
          border-right: 1px solid #666;
        }
      }
    }
  }
  >main{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
`;
type Props = {
  accountsDate: string;
}

const RecordsSection: React.FC<Props> = (props) => {
  const {accountsDate} = props;
  const displayDate = accountsDate.replaceAll('-', '.');
  const {calculateDateTotal} = useRecords()
  const {dateCost, dateIncome, subRecords} = calculateDateTotal(accountsDate);

  return (
    <DateAccounts className="scroll">
      <header>
        <div className="title">{displayDate}</div>
        <ul>
          <li className="cost oneLine">支出 ¥{dateCost}</li>
          <li className="income oneLine">收入 ¥{dateIncome}</li>
        </ul>
      </header>
      <main className="scroll">
        {subRecords.length === 0 ? <NoRecordError/> : <RecordsList subRecords={subRecords}/>}
      </main>
    </DateAccounts>
  );
};

export {RecordsSection};